<template>
  <div :class="{active:isActive}" class="share-dropdown-menu">
    <div class="share-dropdown-menu-wrapper">
      <span class="share-dropdown-menu-title" @click.self="clickTitle"><i class="el-icon-s-promotion" />{{ ' ' + title }}</span>
      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
        <a @click="select(item)">{{ item.title }}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: function() {
        return []
      }
    },
    title: {
      type: String,
      default: 'vue'
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  created() {
    window.document.documentElement.setAttribute('n', this.items.length)
  },
  methods: {
    clickTitle() {
      this.isActive = !this.isActive
    },
    select(item) {
      this.clickTitle()
      this.$emit('getSelect',item)
    }
  }
}
</script>

<style lang="scss" >
  @import "./mixin.scss";
  .share-dropdown-menu {
    width: 120px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    &-title {
      width: 100%;
      display: block;
      border-radius: 4px;
      cursor: pointer;
      background: #7cbd36;
      color: white;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      text-align: center;
      z-index: 2;
      transform: translate3d(0,0,0);
    }
    &-wrapper {
      position: relative;
    }
    &-item {
      text-align: center;
      position: absolute;
      width: 100%;
      background: #e1e9ee;
      line-height: 28px;
      height: 28px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      opacity: 1;
      transition: transform 0.28s ease;
      &:hover {
        background: #7cbd36;
        color: white;
      }
      @include a();
    }
    &.active {
      .share-dropdown-menu-wrapper {
        z-index: 1;
      }
      .share-dropdown-menu-item {
        @include b();
      }
    }
  }
</style>
